<template>
  <div class="register" :style="{ color: white }">
    <div class="register_div">
      <li class="register_div_li1">
        <div class="register_div_li1_div">
          <!-- 存放logo的地方 -->
        </div>
        <div class="register_div_li1_font">智慧小巷</div>
      </li>

      <!-- id -->
      <li class="register_div_li2" :style="{ color: white }">
        <van-icon name="contact" color="#fff" />
        <div>账号</div>
        <input type="text" v-model="loginId" placeholder="请输入账号" />
      </li>
      <!-- 密码 -->
      <li class="register_div_li2">
        <van-icon class="el-icon-lock" color="#fff" />
        <div>密码</div>
        <input type="password" show-password v-model="loginPassword" placeholder="含字母、数字、6-16位之间" />
      </li>
      <!-- 第二次密码 -->
      <li class="register_div_li2">
        <van-icon class="el-icon-lock" color="#fff" />
        <div>确认密码</div>
        <input type="password" show-password v-model="twoPassword" placeholder="含字母、数字、6-16位之间" />
      </li>

      <!-- 手机号 -->
      <li class="register_div_li2">
        <van-icon name="phone-o" />
        <div>手机号</div>
        <input type="text" v-model="phone" placeholder="请输入11位的手机号" />
      </li>

      <!-- 邮箱 -->
      <li class="register_div_li2">
        <van-icon name="envelop-o" />
        <div>邮箱</div>
        <input type="email" v-model="email" placeholder="请输入邮箱" class="reg_email" />
      </li>

      <li class="register_div_li2">
        <div>邮箱验证码</div>
        <input
          type="text"
          v-model="code"
          class="lastInput"
          placeholder="请输入邮箱验证码"
          style="flex: none"
        />

        <el-button
          class="regBut"
          v-if="!isActive"
          @click.prevent="getRCode"
          :disabled="isActive"
        >获取验证码</el-button>
        <el-button
          class="regBut"
          v-else
          @click.prevent="getRCode"
          :disabled="isActive"
        >{{ delayTime }}s</el-button>
      </li>

      <li class="is_user_ok" @click="goLogin()">已有账号去登录</li>

      <li class="register_getuser" @click="Register">确定注册</li>
    </div>
  </div>
</template>

<script>
import { Notify } from 'vant'
import { isEmail, checkPhone } from '../utils/tools'

export default {
  data() {
    return {
      loginId: '', //账号
      loginPassword: '', //密码
      twoPassword: '', //第二次密码
      phone: '', // [手机号]
      email: '', //邮箱
      code: '', //验证码
      token: '',
      isActive: false,
      delayTime: 20,
    }
  },

  methods: {
    //去注册页面
    goLogin() {
      this.$router.push('/login')
    },

    //获取邮箱验证码
    getRCode() {
      // 如果邮箱正确
      if (isEmail(this.email)) {
        this.$axios({
          method: 'get',
          url: '/sys/user/email',
          params: {
            email: this.email,
          },
        })
          .then((resule) => {
            Notify({ type: 'success', message: '获取验证码成功,请查看邮箱！' })
            this.token = resule.data.data.token
          })
          .catch((r) => {
            console.log(r)
          })
      }
      // 获取验证码按钮禁用20s
      if (isEmail(this.email)) {
        let that = this
        let oder = that.delayTime
        this.isActive = true
        setTimeout(() => {
          that.isActive = false
        }, that.delayTime * 1000)

        let timer = setInterval(() => {
          that.delayTime--
          if (that.delayTime == 0) {
            clearInterval(timer)
            that.delayTime = oder
          }
        }, 1000)
      }
    },
    // 确定注册
    Register() {
      const reg = /^(?=.*[0-9])(?=.*[a-zA-Z]).{6,16}$/ // 字母数字6-16
      if (typeof this.loginId == 'undefined' || this.loginId == '') {
        // console.log("请输入账号")
        Notify({ type: 'danger', message: '请输入账号' })
        return
      } else if (
        typeof this.loginPassword == 'undefined' ||
        this.loginPassword == ''
      ) {
        Notify({ type: 'danger', message: '请输入密码' })
        return
      } else if (!reg.test(this.loginPassword)) {
        Notify({
          type: 'danger',
          message: '密码中必须包含字母、数字、6-16位之间',
        })
        return
      } else if (
        typeof this.twoPassword == 'undefined' ||
        this.twoPassword == ''
      ) {
        Notify({ type: 'danger', message: '请输入确认密码' })
        return
      } else if (this.code == '') {
        Notify({ type: 'danger', message: '验证码不能为空' })
        return
      } else if (this.phone == '') {
        Notify({ type: 'danger', message: '手机号不能为空' })
        return
      } else if (!checkPhone(this.phone)) {
        Notify({ type: 'danger', message: '请填写正确的手机号' })
      } else if (this.loginPassword != this.twoPassword) {
        Notify({ type: 'danger', message: '两次密码不一致' })
        return
      } else {
        this.$axios
          .post('/sys/user/register', {
            username: this.loginId,
            password: this.loginPassword,
            email: this.email,
            code: this.code,
            phone: this.phone,
            token: this.token,
          })
          .then((r) => {
            if (r.data.code == 200) {
              Notify({ type: 'success', message: '注册成功' })
              this.$router.push('/login')
            } else {
              Notify({ type: 'danger', message: '账号已经存在' })
            }
          })
      }
    },
  },

  components: {},
}
</script>

<style scoped>
.el-button {
  min-height: auto !important;
}
.van-icon::before {
  font-size: 1.2em;
  margin: 0 5px;
}
.register {
  color: #ffffff;
}
.register {
  height: 100vh;
  position: relative;
}
.register:after {
  display: block;
  height: 100%;
  width: 100%;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background: url(../assets/zhihui.png);
  background-size: 100% 100%;
  /* background-color: rgba(57,169,237,0.2); */
  filter: blur(30px);
  z-index: 2;
}
.register_div {
  height: 70%;
  width: 100%;
  position: fixed;
  top: 10%;
  z-index: 999;
}

.register_div_li1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.register_div_li1_div {
  height: 75px;
  width: 75px;
  background: url(../assets/zhihui.png);
  background-size: 100% 100%;
  border-radius: 50%;
}
.register_div_li1_font {
  font-size: 22px;
  color: #ffffff;
  z-index: 888;
  font-family: 'KaiTi';
}

/* 存放input标签 */
.register_div_li2 {
  height: 40px;
  width: 90%;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px !important;
  border: #ffffff solid 1px;
  border-radius: 0.13333rem;
}
.register_div_li2 > div {
  width: 30%;
  line-height: 40px;
  height: 100%;
  color: #ffffff;
  padding: 0 0 0 5px;
  box-sizing: border-box;
}
.register_div_li2 input {
  flex: 1;
  line-height: 40px;
  height: 100%;
  color: #ffffff;
  background-color: transparent;
}
.lastInput {
  width: 40%;
}
.regBut {
  background: #39a9ed;
  text-align: center;
  width: 30%;
  border: none;
  border-left: 1xp solid #fff;
  border-left: 1px solid #fff;
  border-radius: 0;
}
.van-cell__title {
  color: #ffffff;
}
span {
  /* color: #FFFFFF; */
}
.is_user_ok {
  font-size: 15px;
  /* width: 100%; */
  margin: 10px 20px 10px 20px;
  text-align: right;
}
.register_getuser {
  /* width: 100%; */
  height: 40px;
  font-size: 20px;
  background: #07c160;
  margin: 10px 20px 10px 20px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
.register_div_li2:hover {
  box-shadow: 0 0 5px #ccc;
  border: 1px solid #57a3f3;
}
.register_div_li2:focus {
  box-shadow: 0 0 5px #ccc;
  border: 1px solid #57a3f3;
}
</style>
